<template>
  <el-dialog
    title="POI信息"
    :visible.sync="dialogVisible5"
    width="40%"
    :before-close="handleClose4"
  >
    <div v-show="this.photosFlag">
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in photos" :key="item.url">
          <img :src="item.url" class="image" alt="无" style=" vertical-align: middle;"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-descriptions>
      <el-descriptions-item label="名称">{{ this.name }} </el-descriptions-item>

      <el-descriptions-item label="地址">{{
        this.address || "无"
      }}</el-descriptions-item>

      <el-descriptions-item label="类型">{{ this.type }}</el-descriptions-item>

      <el-descriptions-item label="联系电话">{{
        this.tel
      }}</el-descriptions-item>
    </el-descriptions>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="editfalse3()">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapMutations, mapState } from "vuex";

export default {
  name: "poi_info",
  data() {
    return {
      urls: [],
    };
  },

  props: ["address", "name", "tel", "type", "photos","photosFlag"],

  methods: {
    ...mapMutations(["edittrue3", "editfalse3"]),
    handleClose4(done) {
      done();
    },
  },

  computed: {
    ...mapState(["dialogVisible5"]),

    dialogVisible5: {
      get() {
        return this.$store.state.dialogVisible5;
      },
      set(val) {
        this.editfalse3();
      },
    },
  },

  mounted() {
    this.$nextTick(() => {
      // console.log(this.cpgPosition);
    });
  },
};
</script>

<style>
</style>